<template>
  <div class="status-wrapper">
    <div class="status-title">
      {{this.title}}
    </div>
    <div :id="'barchart'+idTitle" class="barcharts" :style="{height:'130px',width:'130px'}">

    </div>
    <shadowAnimated class="flash-circle" :interval="3000" :is-inset="false">

    </shadowAnimated>
    <shadowAnimated class="flash-circle-inner" :interval="3000" :is-inset="true">

    </shadowAnimated>
    <div class="status-text" style="">
      <animatedInteger v-bind:value="data.total"></animatedInteger>
    </div>
    <div class="text-content">
      <div class="text-item" style="color:#029363">
        <div class="text-number">
          <animatedInteger v-bind:value="data.running"></animatedInteger>
        </div>
        <div class="text-label">运行</div>
      </div>
      <div class="text-item" style="color:#ff9510">
        <div class="text-number">
          <animatedInteger v-bind:value="data.stopped"></animatedInteger>
        </div>
        <div class="text-label">停止</div>
      </div>
      <div class="text-item" style="color:#fe3c59">
        <div class="text-number">
          <animatedInteger v-bind:value="data.crash"></animatedInteger>
        </div>
        <div class="text-label">故障</div>
      </div>
    </div>
  </div>
</template>
<script>
  import echarts from 'echarts';
  import animatedInteger from '@/components/animated-integer';
  import shadowAnimated from '@/components/shadow-animated';

  export default {
    data() {
      return {charts: {}}
    },
    props: {
      data: Object,
      title: String,
      idTitle: String
    },
    watch: {
      data: function (val) {
        this.setData();
      },
    },
    mounted() {
      this.charts = echarts.init(document.getElementById('barchart' + this.idTitle));
      this.setData();
    },
    methods:{
      setData(){
        this.charts.setOption({
          series: [{
            startAngle: 0,
            radius: ['45%', '60%'],
            center: ['50%', '50%'],
            type: 'pie',
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              }
            },
            clockWise: false,
            data: [{
              value: this.data.running,
              itemStyle: {normal: {color: '#029363'}}
            }, {
              value: this.data.stopped,
              itemStyle: {normal: {color: '#ff9510'}}
            }, {
              value: this.data.crash,
              itemStyle: {normal: {color: '#fe3c59'}}
            }]
          }]
        });
      }
    },
    components: {
      animatedInteger, shadowAnimated
    }

  }
</script>
<style lang="less" scoped>
  .status-wrapper {
    height: 210px;
    overflow: hidden;
    position: relative;
    background-image: url('~assets/images/bleft.svg');
    background-repeat: no-repeat;
    background-position: 0px 35px;
    background-size: 350px;
    .status-text {
      position: absolute;
      top: 93px;
      left: 54px;
      font-size: 24px;
      color: orange;
      font-weight: 600;
      text-align: center;
      width: 50px
    }
    .status-title {
      font-size: 22px;
      text-shadow:3px 3px 2px #000;
      color: #00D6FF;
      font-weight: 600;
      text-align: right;
      padding-right: 3px;
    }

    .barcharts {
      position: absolute;
      top: 45px;
      left: 14px;
    }
    .flash-circle {
      position: absolute;
      top: 68px;
      left: 37px;
      width: 84px;
      height: 84px;
      border-radius: 50%;
      z-index: 9;
      box-shadow: 0 0 5px #00D6FF;
    }
    .flash-circle-inner {
      position: absolute;
      top: 85px;
      left: 54px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      z-index: 9;
      box-shadow: 0 0 5px #00D6FF;
    }
    .text-content {
      height: 170px;
      position: relative;
      top: 40px;
      left: 150px;
      display: flex;
      .text-item {
        text-align: center;
        padding: 16px;
        .text-number {
          font-size: 30px;
          font-weight: 600;
        }
      }
    }
  }
</style>
